import { Component, OnInit,Output,EventEmitter } from '@angular/core';
// import { } from '@angular/forms'

@Component({
  selector: 'app-chart-complex',
  templateUrl: './chart-complex.component.html',
  styleUrls: ['./chart-complex.component.css']
})
export class ChartComplexComponent implements OnInit {
 @Output() display = new EventEmitter<any>();
  public  data1;
  public  data2;
  public  data3;

  areaOptionCol=[
    {data :[[0, 0], [0, 100], [5, 100], [5, 0]],name:'列1'},
    {data :[[5, 0], [5, 100], [10, 100], [10, 0]],name:'列2'},
    {data :[[10, 0], [10, 100], [15, 100], [15, 0]],name:'列3'},
    {data :[[15, 0], [15, 100], [20, 100], [20, 0]],name:'列4'},
    {data :[[20, 0], [20, 100], [25, 100], [25, 0]],name:'列5'},
    {data :[[25, 0], [25, 100], [30, 100], [30, 0]],name:'列6'},
    {data :[[30, 0], [30, 100], [35, 100], [35, 0]],name:'列7'},
    {data :[[35, 0], [35, 100], [40, 100], [40, 0]],name:'列8'},
    {data :[[40, 0], [40, 100], [45, 100], [45, 0]],name:'列9'},
    {data :[[45, 0], [45, 100], [50, 100], [50, 0]],name:'列10'},
    {data :[[50, 0], [50, 100], [55, 100], [55, 0]],name:'列11'},
    {data :[[55, 0], [55, 100], [60, 100], [60, 0]],name:'列12'},
    {data :[[60, 0], [60, 100], [65, 100], [65, 0]],name:'列13'},
    {data :[[65, 0], [65, 100], [70, 100], [70, 0]],name:'列14'},
    {data :[[70, 0], [70, 100], [75, 100], [75, 0]],name:'列15'},
    {data :[[75, 0], [75, 100], [80, 100], [80, 0]],name:'列16'},
    {data :[[80, 0], [80, 100], [85, 100], [85, 0]],name:'列17'},
    {data :[[85, 0], [85, 100], [90, 100], [90, 0]],name:'列18'},
    {data :[[90, 0], [90, 100], [95, 100], [95,0]],name:'列19'},
    {data :[[95, 0], [95, 100], [100, 100], [100, 0]],name:'列20'},
    {data :[[100, 0], [100, 100], [105, 100], [105,0]],name:'列21'},
    {data :[[105, 0], [105, 100], [110, 100], [110, 0]],name:'列22'}
                  ];

  areaOption=[
    {data :[[0, 95], [0, 100], [110, 100], [110, 95]],name:'行1'},
    {data :[[0, 90], [0, 95], [110, 95], [110, 90]],name:'行2'},
    {data :[[0, 85], [0, 90], [110, 90], [110, 85]],name:'行3'},
    {data :[[0, 80], [0, 85], [110, 85], [110, 80]],name:'行4'},
    {data :[[0, 75], [0, 80], [110, 80], [110, 75]],name:'行5'},
    {data :[[0, 70], [0, 75], [110, 75], [110, 70]],name:'行6'},
    {data :[[0, 65], [0, 70], [110, 70], [110, 65]],name:'行7'},
    {data :[[0, 60], [0, 65], [110, 65], [110, 60]],name:'行8'},
    {data :[[0, 55], [0, 60], [110, 60], [110, 55]],name:'行9'},
    {data :[[0, 50], [0, 55], [110, 55], [110, 50]],name:'行10'},
    {data :[[0, 45], [0, 50], [110, 50], [110, 45]],name:'行11'},
    {data :[[0, 40], [0, 45], [110, 45], [110, 40]],name:'行12'},
    {data :[[0, 35], [0, 40], [110, 40], [110, 35]],name:'行13'},
    {data :[[0, 30], [0, 35], [110, 35], [110, 30]],name:'行14'},
    {data :[[0, 25], [0, 30], [110, 30], [110, 25]],name:'行15'},
    {data :[[0, 20], [0, 25], [110, 25], [110, 20]],name:'行16'},
    {data :[[0, 15], [0, 20], [110, 20], [110, 15]],name:'行17'},
    {data :[[0, 10], [0, 15], [110, 15], [110, 10]],name:'行18'},
    {data :[[0, 5], [0, 10], [110, 10], [110, 5]],name:'行19'},
    {data :[[0, 0], [0, 5], [110, 5], [110, 0]],name:'行20'}
              ];

  selectAreaOption:any;
  selectAreaOptionCol:any;

  chatInit(data:any,index?:number){
    let Highcharts  = (<any>window)['Highcharts'];
    if(data['data']){
      this.chartOptions= {
        title: {
          // text: '机组运行工况分布图'
          text: ''
        },
        xAxis: {
          title: {
            text: '机组功率P'
          },
          labels:{
            formatter:function(){return this.value+"%";},
            autoRotation: false,
            style: {
              "fontSize": "8px"
            }
          },
          tickInterval:5,
          min:0,max:110,
          gridLineColor:"#2B9CFF",
          gridLineWidth:"0.5",
          gridLineDashStyle:"LongDash",
          // startOnTick: true,
          // endOnTick: true,
          plotLines:[{
            color:"green",
            dashStyle:'LongDashDotDot',
            value:100,
            width:1,
            label:{
              text:'(P额定)',
              align:'center',
              y:570,
              rotation:0,
              style: {
                "fontSize": "8px"
              }
            }
          }]//标志线
        },
        yAxis: {
          gridLineColor:"#2B9CFF",
          gridLineWidth:"0.5",
          gridLineDashStyle:"LongDash",//网格线部分
          title: {
            text: '工作水头H'
          },
          plotLines:[{
            color:"green",
            dashStyle:'LongDashDotDot',
            value:70,
            width:1,
            label:{
              text:'(H额定)',
              align:'left',
              x:-74,
              style: {
                "fontSize": "8px"
              }
            }
          }],//标志线
          labels:{ formatter:function(){return this.value+"%"},
            style: {
              "fontSize": "8px"
            }
          },
          min:0,max:100,
          tickInterval:5
        },
        legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'middle'
        },
        colorAxis: {
          min: 0,
          minColor: '#FFFFFF',
          maxColor: Highcharts.getOptions().colors[0]
        },//热力图指标
        series: [
          {
            name: '每人的销售额',
            type: 'heatmap',
            borderWidth: 0.2,
            colsize:5,
            rowsize:5,
            data: [[47.5,82.5,10],[52.5,82.5,20],[57.5,82.5,90],[62.5,82.5,60],[67.5,82.5,50],
              [47.5,87.5,30],[52.5,87.5,20],[57.5,87.5,30],[62.5,87.5,50],[67.5,87.5,20],
              [47.5,92.5,0],[52.5,92.5,30],[57.5,92.5,90],[62.5,92.5,60],[67.5,92.5,60]],
            dataLabels: {
              enabled: false,
              color: '#000000'
            }
          },//1111111
          {
            name: '运行点',
            type: 'scatter',
            color: Highcharts.getOptions().colors[1],
            data: [[65, 90], [55, 70], [50, 75], [66, 85], [57, 84], [45, 85], [55, 85], [60, 99], [66, 107], [55, 102], [56, 108], [67, 101], [50, 100], [70, 100], [69, 102], [67, 102.2], [61, 80], [54, 95], [65, 95], [59, 92], [58, 91], [58, 94]],
            marker:{radius:2}
          },//222222222
          {
          name: '目标1',
          type: 'polygon',
          data: typeof index ==='number'&& index==0?data['data']: this.chartOptions.series[2].data,
          color: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.5).get(),
          enableMouseTracking: true,
          states: {
            hover: {
              lineWidth: 3
            }
          }
        },{
          name: '目标2',
          type: 'polygon',
          data:index==1?data['data']: this.chartOptions.series[3].data,
          color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
          enableMouseTracking: true,
          states: {
            hover: {
              lineWidth: 3
            }
          }
        },
          {
            type: 'line',
            name: '导叶开度1',
            lineWidth:0.8,
            lineColor:"",
            data: [[0, 3], [18, 109]],
            marker: {
              enabled: false
            },
            states: {
              hover: {
                lineWidth: 1
              }
            },
            enableMouseTracking: false
          },
          {
            type: 'line',
            name: '导叶开度2',
            lineWidth:0.8,
            lineColor:"",
            data: [[10,0], [44, 109]],
            marker: {
              enabled: false
            },
            states: {
              hover: {
                lineWidth: 1
              }
            },
            enableMouseTracking: false
          }
          ],
        credits: {
          enabled: false},
        tooltip: {
          headerFormat: '<b>{series.name}</b><br>',
          pointFormat: '{point.x} 机组, {point.y} 效率'
        }
      }
    }
  }

  changeData(){
    this.display.emit();
  }
  constructor() { }
  public chartOptions;
  ngOnInit() {
    this.selectAreaOption=this.areaOption[0];
    this.selectAreaOptionCol=this.areaOptionCol[0];
    let Highcharts  = (<any>window)['Highcharts'];
    this.chartOptions = {
      title: {
        // text: '机组运行工况分布图'
        text: ''
      },
      xAxis: {
        title: {
          text: '机组功率P'
        },
        labels:{
          formatter:function(){return this.value+"%";},
          autoRotation: false,
          style: {
            "fontSize": "8px"
          }
        },
        tickInterval:5,
        min:0,max:110,
        gridLineColor:"#2B9CFF",
        gridLineWidth:"0.5",
        gridLineDashStyle:"LongDash",
        // startOnTick: true,
        // endOnTick: true,
        plotLines:[{
          color:"green",
          dashStyle:'LongDashDotDot',
          value:100,
          width:1,
          label:{
            text:'(P额定)',
            align:'center',
            y:570,
            rotation:0,
            style: {
              "fontSize": "8px"
            }
          }
        }]//标志线
      },
      yAxis: {
        gridLineColor:"#2B9CFF",
        gridLineWidth:"0.5",
        gridLineDashStyle:"LongDash",//网格线部分
        title: {
          text: '工作水头H'
        },
        plotLines:[{
          color:"green",
          dashStyle:'LongDashDotDot',
          value:70,
          width:1,
          label:{
            text:'(H额定)',
            align:'left',
            x:-74,
            style: {
              "fontSize": "8px"
            }
          }
        }],//标志线
        labels:{ formatter:function(){return this.value+"%"},
          style: {
            "fontSize": "8px"
          }
        },
        min:0,max:100,
        tickInterval:5
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
      },
      colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
      },//热力图指标
      series: [
        {
          name: '每人的销售额',
          type: 'heatmap',
          borderWidth: 0.2,
          colsize:5,
          rowsize:5,
          data: [[47.5,82.5,10],[52.5,82.5,20],[57.5,82.5,90],[62.5,82.5,60],[67.5,82.5,50],
            [47.5,87.5,30],[52.5,87.5,20],[57.5,87.5,30],[62.5,87.5,50],[67.5,87.5,20],
            [47.5,92.5,0],[52.5,92.5,30],[57.5,92.5,90],[62.5,92.5,60],[67.5,92.5,60]],
          dataLabels: {
            enabled: false,
            color: '#000000'
          }
        },//111111111
        {
          name: '运行点',
          type: 'scatter',
          color: Highcharts.getOptions().colors[1],
          data: [[65, 90], [55, 70], [50, 75], [66, 85], [57, 84], [45, 85], [55, 85], [60, 99], [66, 107], [55, 102], [56, 108], [67, 101], [50, 100], [70, 100], [69, 102], [67, 102.2], [61, 80], [54, 95], [65, 95], [59, 92], [58, 91], [58, 94]],
          marker:{radius:2}
        },//222222222
          {
        name: '目标1',
        type: 'polygon',
        data: [],
        color: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.5).get(),
        enableMouseTracking: true,
        states: {
          hover: {
            lineWidth: 3
          }
        }
          },
        {
        name: '目标2',
        type: 'polygon',
        data: [],
        color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
        enableMouseTracking: true,
        states: {
          hover: {
            lineWidth: 3
          }
        }
        },
        {
          type: 'line',
          name: '导叶开度1',
          lineWidth:0.8,
          lineColor:"",
          data: [[0, 3], [18, 109]],
          marker: {
            enabled: false
          },
          states: {
            hover: {
              lineWidth: 1
            }
          },
          enableMouseTracking: false
        },
        {
          type: 'line',
          name: '导叶开度2',
          lineWidth:0.8,
          lineColor:"",
          data: [[10,0], [44, 109]],
          marker: {
            enabled: false
          },
          states: {
            hover: {
              lineWidth: 1
            }
          },
          enableMouseTracking: false
        }
        ],
      credits: {
        enabled: false},
      tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x} 机组, {point.y} 效率'
      }
    }
  }

}
